<style lang="scss" rel="stylesheet/scss">
    .j-news-content {
        .con-tip {
            text-align: center;
            p.one {
                color: #222;
                font-weight: 700;
                margin-bottom: 0.5rem;
            }
            span.two {
                color: #e64340;
                border: 1px solid #e64340;
                border-radius: 0.2rem;
                line-height: 1.3rem;
                padding: 0 0.6rem;
            }
        }
        .img-txt-video-div {
            padding: 0.5rem;
            color: #444;
            .div-text {
                p {
                    text-indent:2em;
                    word-break: break-all;
                    line-height: 1.5rem;
                }
            }
            .div-img {
                padding: 0.4rem 0;
                .img{
                    &.img-one{
                        img{
                            width: 100%;
                            height: 10rem;
                        }
                    }
                    &.img-two{
                        img{
                            width: 49%;
                            height: 10rem;
                            margin-right: 1%
                        }
                    }
                    &.img-over-three{
                        img{
                            width: 32%;
                            height: 7rem;
                            margin-right: 1%;
                        }
                    }
                }
            }
        }
        .to-href {
            display: flex;
            padding: 0.5rem 1rem;
            border-top: 1px solid #f5f5f5;
            border-bottom: 1px solid #f5f5f5;
            img{
                width: 2.5rem;
                height: 2.5rem;
                flex:0 0 2.5rem;
            }
            p {
                color: #e64340;
                margin-left:0.5rem;
                line-height: 2rem;
            }
        }
        .ask-our {
            padding: 0.5rem 1.5rem;
            text-align: center;
            color: #333;
            span.read {
                color: #0093f9;
                text-decoration: underline
            }
            .two-icon {
                display: flex;
                margin-top: 1.5rem;
                .iconfont {
                    color: #333;
                    flex:1;
                    text-align: center;
                }
            }
        }
    }
</style>
<template>
    <div class="j-news-content">
        <j-info-user :userinfo="content"></j-info-user>
         <div class="con-tip">
            <p class="font-normal-small one">点击【首页】，收藏平台，一键发布，长期有效</p>
            <span class="font-small two">阅读+10 分享+100，好友分享+100亿币，提现秒到</span>
        </div>
        <div class="img-txt-video-div ">
            <video-player class="video-player vjs-custom-skin video"
                ref="videoPlayer"
                :playsinline="false"
                :options="playerOptions">
            </video-player>
            {{playerOptions.sources[0].src}}
            <div class="font-normal div-text">
                <p v-html="content.adver_content"></p>
            </div>
            <div class="div-img" v-if="content.adver_img">
                <div class="img img-one" v-if="imgs.length > 0 && imgs.length < 2">
                    <img class="previewer-demo-img" v-for="(item, index) in imgs" v-bind:key="index" :src="item.src" width="100" @click="imgshow(index)">
                </div>
                <div class="img img-two" v-else-if="imgs.length > 1 && imgs.length < 3">
                    <img class="previewer-demo-img" v-for="(item, index) in imgs" v-bind:key="index" :src="item.src" width="100" @click="imgshow(index)">
                </div>
                <div class="img img-over-three" v-else-if="imgs.length > 2">
                    <img class="previewer-demo-img" v-for="(item, index) in imgs" v-bind:key="index" :src="item.src" width="100" @click="imgshow(index)">
                </div>
            </div>
        </div>
        <div class="to-href" v-if="content.link_content && content.link_text">
            <img :src="content.link_img" alt="">
            <a :href="content.link_content | fillhttp" class="font-normal">{{content.link_text}}</a>
        </div>
        <div class="ask-our">
            <p class="iconfont icon-question font-normal"> 为保证您合法权利，<span class="read" @click="readme">请点击阅读</span></p>
            <div class="two-icon font-big-normal">
                <p class="iconfont icon-chakantiezigengduojubao" @click="jubao"> 举报</p>
                <p class="iconfont icon-pinglun" @click="toDownloedApp"> 聊一聊</p>
            </div>
        </div>
        <van-popup v-model="jbao.popShow" position="bottom">
            <van-picker show-toolbar :columns="jbao.popList" @cancel="onCanceljubao" @confirm="selectjubao" />
        </van-popup>
    </div>
</template>

<script>
    import { ImagePreview } from 'vant';
    import jInfoUser from "components/Header/InfoUser"
    import 'video.js/dist/video-js.css'
    import { videoPlayer } from 'vue-video-player'
    export default {
        components: {
            jInfoUser,
            videoPlayer
        },
        props:['id'],
        computed: {
            imgs() {
                if(!this.content.adver_img) return
                let arr = []
                for(let item of this.content.adver_img) {
                    let img = {}
                    img.msrc = item
                    img.src = item
                    arr.push(img)
                }
                return arr
            }
        },
        data () {
            return {
                playerOptions: {
                    // playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                    controls: true,
                    autoplay: true, //如果true,浏览器准备好时开始回放。
                    muted: false, // 默认情况下将会消除任何音频。
                    loop: false, // 导致视频一结束就重新开始。
                    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                    language: 'zh-CN',
                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    sources: [{
                        type: "video/mp4",
                        // src: "http://video.yijiashibao.com/ea12d3b84bea4b43b08276198e400e0c/b7608ab1f2504e74a7b82dfc1532fefc-5287d2089db37e62345123a1be272f8b.mp4" //你的视频地址（必填）
                    }],
                    // poster: this.content.video_thumb, //你的封面地址
                    width: document.documentElement.clientWidth,
                    notSupportedMessage: '此视频暂无法播放，请输入有效地址。', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    controlBar: {
                        timeDivider: true,
                        durationDisplay: true,
                        remainingTimeDisplay: false,
                        progressControl: true,
                        fullscreenToggle: true  //全屏按钮
                    }
                },
                jbao: {
                    popShow: false,
                    popList: ['虚假信息', '垃圾广告', '侵权抄袭', '涉黄涉毒', '政治敏感', '其他']
                },
                content: {}
            }
        },
        beforeCreate () {
            
        },
        created () {
        },
        mounted() {
            this.$fetch('/index.php',{act:'unitary_advert',op:'adver_detail',id:'6939'}).then((res) => {
                this.content = res.datas
                this.playerOptions.sources[0].src = res.datas.video_content
                this.playerOptions.poster = res.datas.video_thumb
            })
        },
        methods: {
            imgshow (index) {
                ImagePreview({
                    images: this.content.adver_img,
                    startPosition: index,
                })
            },
            readme() {
                xmview.showAlert('温馨提示','亿家世宝仅向注册用户和非注册用户提供平台服务，亿家世宝平台上的信息系用户自行发布，由于海量信息的存在及现有技术原因，亿家世宝无法杜绝可能存在的风险和瑕疵。您应谨慎判断确定相关信息的真实性、合法性和有效性，并注意保留相应的证据以利于维权。如可能，尽量采用网站建议的交易方式进行。<span style="color:#f00">亿家世宝不对信息的真实性，准确性，有效性和安全性负责。</span>')
            },
            jubao() {
                this.jbao.popShow = true
            },
            toDownloedApp() {
                xmview.showAlert('','下载亿家世宝APP，在里面随意畅聊哦~还能互相加为好友，方便随时沟通','点击下载',() => {
                    xmview.showToast('我去那边下载啦~~');
                })
            },
            selectjubao(value, index) {
                xmview.showToast(`当前值：${value}, 当前索引：${index}`);
                this.jbao.popShow = false
            },
            onCanceljubao() {
                this.jbao.popShow = false
            },
        },
        directives: {
            // TransferDom
        }
    }
</script>

